<!-- 登录页面 -->
<template>
  <div class="login">
    <div class="login_form">
      <div class="form_head">米修在线后台管理系统</div>
      <div class="form_body">
        <el-form
          :model="loginForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
        <el-form-item label="邮箱" prop="email">
            <el-input
              type="text"
              v-model="loginForm.email"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="loginForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login('ruleForm')"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
        loginForm:{
            email:'',
            passowrd:''
        },
        rules:{
            email:[
                {required:true,type:email,message:'邮箱格式不正确',trigger:'blur'}
            ],
            password:[
                {required:true,message:'密码不能为空',trigger:'blur'},
                {min:3,max:30,message:'密码请保持在3到30个字符之间',trigger:'blur'}
            ],
        }
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    login(formName){
         this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
  },
  watch: {},
  mixins: [],
};
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background: url(../assets/bg.jpeg) repeat center center;
  background-size: 100% 100%;
  position: relative;
  .login_form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    .form_head {
      width: 100%;
      height: 60px;
      line-height: 60px;
      text-align: center;
      font-size: 30px;
      font-family: "微软雅黑";
      color: #fff;
    }
    .form_body {
      width: 100%;
      padding: 20px;
      background: #fff;
      border-radius: 10px;
    }
  }
}
</style>